<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>山东省空气质量查询网站</title>
    <link href="aspx/css/bootstrap.min.css" rel="stylesheet">
    <link href="aspx/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    
    <script>
        function judge()
        {
        	if(sign == 2)
        		DisplayGraphs2();
        	if(sign == 3)
        		DisplayGraphs3();
        	if(sign == 4){
        		DisplayGraphs4();
        	}
        	
        }
    </script>
     
    <script>
        function ycit()
        {
        	document.getElementById("container").style.display = "none";
            document.getElementById("box").style.display = "block";
            send();
        }
    </script>
    

</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">山东省空气质量查询系统</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">山东省空气质量查询系统</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <form action="gotoAdminLogin" method="post">
            <ul class="nav navbar-nav" role="tablist">
                <li class="active"><a aria-controls="index_page" role="tab" data-toggle="tab" onclick='ona1click()'>主要污染物</a></li>
                <li><a aria-controls="chart_page" role="tab" data-toggle="tab" onclick='ona2click()'>污染物数值</a></li>
                <li><a aria-controls="table_page" role="tab" data-toggle="tab" onclick='ona3click()'>天气质量</a></li>
               <li><a aria-controls="table_page" role="tab" data-toggle="tab" onclick='ona4click()'>预测</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">          
                <li id="nav_login"><button data-toggle='modal' data-target='#myModal'type="submit">管理员登录</button></li>          
                <li id="nav_logout" style="display: none"><a href="/logout.aspx">注销</a></li>
            </ul>
          </form>
        </div>
    </div>
</nav>
<div class="container">
    <div class="tab-content">
        <div role="tabpanel" class="row tab-pane active" id="index_page">
            <div class="col-xs-12" style="padding: 10px">
                <form class="form-inline" id="form" action="DealData">
                    <div class="form-group">
                        <label class="control-label" for="area">请选择地市</label>
                        <select class="form-control" id="area" name="area">
                            <option>请选择</option>
                        </select>
                    </div>
                    <div class="form-group" id='prediction'>
                        <label class="control-label" >请选择检查点</label>
                        <select class="form-control" id="place" name="place">
                            <option>请选择</option>
                        </select>
                    </div>
                    <div class="form-group" id='time'>
                        <label class="control-label"  id='time'>请选择时间</label>
                        <select class="form-control" id="year" name="place">
                           <option>年</option>
                        </select>
                        <select class="form-control" id="month" name="place">
                            <option>月</option>
                        </select>
                        <select class="form-control" id="day" name="place">
                            <option>日</option>
                        </select>
                        <select class="form-control" id="hour" name="place">
                            <option>时</option>
                        </select>
                    </div>
                    <div class="form-group"  id="page1">
                        <label class="control-label" for="major">请选择主要污染物</label>
                        <select class="form-control" id="major" name="major">
                            <option>请选择</option>
                        </select>
                    </div>
                    <div class="form-group" style="display:none" id="page2">
                        <label class="control-label" for="place">请选择污染物</label>
                        <select class="form-control" id="pollutant" name="pollutant">
                            <option>请选择</option>
                        </select>
                    </div>
                    <div class="form-group" style="display:none" id="page3">
                        <label class="control-label" for="quality">请选择天气质量</label>
                        <select class="form-control" id="quality" name="quality">
                            <option>请选择</option>
                        </select>
                    </div>
                    <input class="btn btn-default" id="select" type="button" onclick="ycit()" value="查询">
                    <input class="btn btn-default" type="button" onclick="send2()" value="图表" id='myChart' style="display:none">
                    <input class="btn btn-default" type="button" onclick="send3()" value="预测" id='myPrediction' style="display:none">
                </form>
            </div>
            <div id="box" class="col-xs-12">
                <table id="table" class="table table-hover table-bordered">
                    <thead>
                    <tr>
                        <th>市</th>
                        <th>区</th>
                        <th>时间</th>
                        <th style="display:none">AQI</th>
                        <th style="display:none">AQItype</th>
                        <th style="display:none">污染指数</th>
                        <th style="display:none">PM10</th>
                        <th style="display:none">CO</th>
                        <th style="display:none">NO2</th>
                        <th style="display:none">O3/h</th>
                        <th style="display:none">O3/8h</th>
                        <th style="display:none">SO2</th>
                        <th>主要污染物</th>
                    </tr>
                    </thead>
                    <tbody id="tbody">
                    </tbody>
                 </table>
        	</div>
        </div>
    </div>
</div>

<script src="aspx/js/jquery.min.js"></script>
<script src="aspx/js/bootstrap.min.js"></script>
<script src="aspx/js/bootstrap-datetimepicker.min.js"></script>
<script src="aspx/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="aspx/js/Chart.min.js"></script>
<script>
sign = 1;

mark = 0;
var otable = document.getElementById('table');
var oth = otable.getElementsByTagName('th')
function init(){
	clearTab();
	var page1 = document.getElementById('page1');
	var page2 = document.getElementById('page2');
	var page3 = document.getElementById('page3');
	document.getElementById('prediction').style.display='inline-block';
	document.getElementById('select').style.display='inline-block';
	document.getElementById('time').style.display='inline-block';
	document.getElementById('myPrediction').style.display='none';
	document.getElementById('box').style.display='block';
	document.getElementById('myChart').style.display='none';
	page1.style.display = 'none';
	page2.style.display = 'none';
	page3.style.display = 'none';
	for (var i = 3; i < oth.length; i++)
		oth[i].style.display = 'none';
}
function ona1click(){
	var page1 = document.getElementById('page1');
	init();
	page1.style.display='inline-block';
	sign = 1;
	//oth[2].style.display = 'table-cell';
	//oth[3].style.display = 'table-cell';
	oth[12].style.display = 'table-cell';
}
function ona2click(){
	init();
	var page2 = document.getElementById('page2');
	document.getElementById('myChart').style.display='inline-block';
	
	page2.style.display='inline-block';
	sign = 2;
	oth[5].style.display = 'table-cell';
	//oth[12].style.display = 'table-cell';
}
function ona3click(){
	init();
	var page3 = document.getElementById('page3');
	document.getElementById('myChart').style.display='inline-block';
	
	page3.style.display='inline-block';
	sign = 3;
	oth[4].style.display = 'table-cell';
	oth[3].style.display = 'table-cell';
}

function ona4click(){
	init();
	document.getElementById('prediction').style.display='none';
	document.getElementById('time').style.display='none';
	document.getElementById('myPrediction').style.display='inline-block';
	document.getElementById('box').style.display='none';
	document.getElementById('select').style.display='none';
}

var Tbody = document.getElementById('tbody');
function changeTable1(a, c, b, d, e, f, g, h, i, j, k, l, m) {
    var otr = document.createElement('tr');
    otr.innerHTML = "<td>"+a+'</td><td>'+b+'</td><td>'+c+'</td><td>'+m+'</td>';
    var newtd = otr.getElementsByTagName('td');
    Tbody.appendChild(otr);
    
}

function changeTable2(a, c, b, d, e, f, g, h, i, j, k, l, m) {
	var mtr = document.getElementById("table");
	var ths = mtr.getElementsByTagName('th');
    var otr = document.createElement('tr'); 
    if (mark == 5)
   		otr.innerHTML = "<td>"+a+'</td><td>'+b+'</td><td>'+c+'</td><td>'+f+'</td>';
   	if (mark == 6)
   		otr.innerHTML = "<td>"+a+'</td><td>'+b+'</td><td>'+c+'</td><td>'+g+'</td>';
   	if (mark == 7)
   	   	otr.innerHTML = "<td>"+a+'</td><td>'+b+'</td><td>'+c+'</td><td>'+h+'</td>';
   	if (mark == 8)
    	otr.innerHTML = "<td>"+a+'</td><td>'+b+'</td><td>'+c+'</td><td>'+i+'</td>';
    if (mark == 9)
    	otr.innerHTML = "<td>"+a+'</td><td>'+b+'</td><td>'+c+'</td><td>'+j+'</td>';
  	if (mark == 10)
       	otr.innerHTML = "<td>"+a+'</td><td>'+b+'</td><td>'+c+'</td><td>'+k+'</td>';
    if (mark == 11)
       	otr.innerHTML = "<td>"+a+'</td><td>'+b+'</td><td>'+c+'</td><td>'+l+'</td>';
    var newtd = otr.getElementsByTagName('td');
    oth[5].style.display = 'table-cell';
    Tbody.appendChild(otr);
    
}
function changeTable3(a, c, b, d, e, f, g, h, i, j, k, l, m) {
	var otr = document.createElement('tr');
    otr.innerHTML = "<td>"+a+'</td><td>'+b+'</td><td>'+c+'</td><td>'+e+'</td><td>'+f+'</td>';
    var newtd = otr.getElementsByTagName('td');
    Tbody.appendChild(otr);
    
}

function clearTab(){
	var tbody = document.getElementById('tbody');
	while (tbody.hasChildNodes())
		{
			tbody.removeChild(tbody.firstChild);
		}
}

function send(){
	clearTab();
	if(JudgmentQueryCondition()){
		var area = document.getElementById('area');
		var place = document.getElementById('place');
		var quality = document.getElementById('quality');
		var year = document.getElementById('year');
		var month = document.getElementById('month');
		var day = document.getElementById('day');
		var hour = document.getElementById('hour');
		var major = document.getElementById('major');
		if (year.value != "年" && (month.value == '月' || day.value == '日' || hour.value == '时')){
			alert('时间不正确');
			return;
		}
		var time = year.value+"-"+month.value+"-"+day.value+" "+hour.value;
		var re = "DealData?area="+area.value+"&place="+place.value+"&quality="+quality.value+"&time="+time+"&major="+major.value;
		var url = encodeURI(re);
		xhr = new XMLHttpRequest();
		xhr.open('GET', url, true);
		xhr.send();
		xhr.onreadystatechange = function() {
			if (this.readyState != 4)
				return;
			
			//alert(json.length);
			if (this.responseText != '[]')
			{
				var json = eval(this.responseText);
				for (var i= 0; i < json.length; i++)
					{
						if (sign == 1)
						 	changeTable1(json[i].a, json[i].b, json[i].c, json[i].d, json[i].e, json[i].f, json[i].g, json[i].h, json[i].i, json[i].j, json[i].k, json[i].l, json[i].m);
						if (sign == 2)
							changeTable2(json[i].a, json[i].b, json[i].c, json[i].d, json[i].e, json[i].f, json[i].g, json[i].h, json[i].i, json[i].j, json[i].k, json[i].l, json[i].m);
						if (sign == 3)
							changeTable3(json[i].a, json[i].b, json[i].c, json[i].d, json[i].e, json[i].f, json[i].g, json[i].h, json[i].i, json[i].j, json[i].k, json[i].l, json[i].m);				
					}
			}
			else
				alert("该项为空");
	    }
	}
	else{
		alert("请输入污染物");
	}
}

function SendServal(ServalName, deadline){
	var area = document.getElementById('area');
	var place = document.getElementById('place');
	var quality = document.getElementById('quality');
	var year = document.getElementById('year');
	var month = document.getElementById('month');
	var day = document.getElementById('day');
	var hour = document.getElementById('hour');
	var major = document.getElementById('major');
	var time = year.value+"-"+month.value+"-"+day.value+" "+hour.value;
	var re = ServalName+"?area="+area.value+"&place="+place.value+"&quality="+quality.value+"&time="+
			time+"&deadline="+deadline+"&major="+major.value;
	var url = encodeURI(re);
	xhr = new XMLHttpRequest();
	xhr.open('GET', url, true);
	xhr.send();
	xhr.onreadystatechange = function() {
		if (this.readyState != 4)
			return;
		if (this.responseText != '[]')
			{
				js = eval(this.responseText);
				judge();
			}
			
		else{
			alert("该项为空");				
		}	       
	}
}


function send2(){
	if(JudgmentQueryCondition()){
		clearTab();	
	    document.getElementById("box").style.display = "none";
	    document.getElementById("container").style.display = "block";
	    var area = document.getElementById('area');
		var place = document.getElementById('place');
		var quality = document.getElementById('quality');
		var year = document.getElementById('year');
		var month = document.getElementById('month');
		var day = document.getElementById('day');
		var hour = document.getElementById('hour');
		var major = document.getElementById('major');
		if (year.value != "年" && (month.value == '月' || day.value == '日' || hour.value == '时')){
			alert('时间不正确');
			return;
		}
		var deadline = "0";
		if(year.value!= "年" && month.value != '月' && day.value != '日' && hour.value != '时'){
			//用户输入起始时间
			deadline = prompt("输入要查询从起始时间后多少小时的数据", "数值");
			if(parseInt(deadline) < 0){
				alert("数值不合理");
				return;
			}
			SendServal('ExcelData', deadline);
		}
		else {
			SendServal('DealData', '1')
		}
	}	

			
}
function send3(){
	//预测查询
		clearTab();
		var area = document.getElementById('area');
		
		if (area.value != '请选择 '){
			xhr = new XMLHttpRequest();
			xhr.open('GET', "Prediction?area="+area.value, true);
			xhr.send();
			xhr.onreadystatechange = function() {
				if (this.readyState != 4)
					return;
				
				//alert(json.length);
				if (this.responseText != '[]')
				{
					js = eval(this.responseText);
					sign = 4;
					judge();				
				}
				else{
					alert("该项为空");
				}
	    }
	}
	else{
		alert("请输入要查询的类型");
	}
}

function JudgmentQueryCondition(){
	if(sign == 2){
		if(0 == mark){
			return 0;
		}
		else{
			return 1;
		}
	}
	return 1;
}
var year = document.getElementById("year");
var month = document.getElementById("month");
var day = document.getElementById("day");
var hour = document.getElementById("hour");

function setTime(year, month, day, tag){
	tag.options.length=1;
	xhr = new XMLHttpRequest();
	var rs = 'TimeDeal?year='+year+'&month='+month+'&day='+day;
	//alert(rs);
	var url = encodeURI(rs);
	xhr.open('GET', url, true);
	xhr.send();
	xhr.onreadystatechange = function() {
		if (this.readyState != 4)
			return;
				//alert(json.length);
		
		if (this.responseText != '[]')
		{
			data = eval(this.responseText);
			
			//alert(json.data);
			for (var i = 0; i < data.length; i++){
				var option = document.createElement('option');
				
				tag.options.add(new Option(data[i],data[i]));;
			}
		}
	}
}

setTime("","","",year);

year.onchange = function(){
	
	setTime(year.value,"","",month);
}
month.onchange = function(){
	setTime(year.value,month.value,"",day);
}
day.onchange = function(){
	setTime(year.value,month.value,day.value,hour);
}

    var area = $("#area"),
        place = $("#place"),
        pollutant = $("#pollutant"),
        aqitype = $("#quality"),
        major = $("#major");
    
    
    $.ajax({
        url: "./aspx/pollutant.aspx",
        dataType: 'json',
        success: function (response) {
            dic = response;
            for (var key in response) {
                major.append('<option>'+key+'</option>');
            }
        },
        error: function (e) {
            console.log(e);
        }
    });
    $.ajax({
        url: "./aspx/aqitype.aspx",
        dataType: 'json',
        success: function (response) {
            for (var key in response) {
            	aqitype.append('<option>'+key+'</option>');
            }
        },
        error: function (e) {
            console.log(e);
        }
    });
    
    $.ajax({
        url: "./aspx/queryarea.aspx",
        dataType: 'json',
        success: function (response) {
            for (var key in response) {
                area.append('<option>'+key+'</option>');
            }
        },
        error: function (e) {
            console.log(e);
        }
    });
   
    area.change(function () {
        var key = area.val();
        $.ajax({
            url: "./aspx/queryarea.aspx",
            dataType: 'json',
            success: function (response) {
            	place.html('');
            	
                place.append('<option>请选择</option>');
                for (var i = 0;i<response[key].length;i++) {
                    place.append('<option>'+response[key][i]+'</option>');
                }
            },
            error: function (e) {
                console.log(e);
            }
        });
    });
    $.ajax({
        url: "./aspx/pollutant1.aspx",
        dataType: 'json',
        success: function (response) {
            dic = response;
            for (var key in response) {
                pollutant.append('<option>'+key+'</option>');
            }
        },
        error: function (e) {
            console.log(e);
        }
    });
    pollutant.change(function () {
    	var key = pollutant.val();
        $.ajax({
            url: "./aspx/pollutant1.aspx",
            dataType: 'json',
            success: function (response) {
            	mark = response[key];
            },
            error: function (e) {
                console.log(e);
            }
    	});
    });
    
</script>
<div id="container" style="min-width:800px;height:600px;margin:0 auto;">

<div id="abc"></div>
</div>
	<script src="assets/js/highcharts.js"></script>
    <script>
        // 图表配置
        function DisplayGraphs2()
        {
        	var options = {
    chart: {
        renderTo: 'container',
        type: 'line',
        inverted: false
    },
    title: {
                    text:'城市污染指数图 '           // 标题
            },
            xAxis: {},
            yAxis: {
                title: {
                    text: '污染指数(33μg/m³)'                // y 轴标题
                }
            },
    series: [{}]
};
        	var datas=new Array();
        	var times=new Array();
        	for (var z= 0; z < js.length; z++)
        	{
        		times[z] = js[z].b;
        	}
        	options.xAxis.categories = times;
        	
        		var mtr = document.getElementById("table"); //初始化mark
            	if(mark == 5)
            	{
            		for (var z= 0; z < js.length; z++)
                	{
                		datas[z] = js[z].f;
                	}
            		options.series[0].name = 'PM2.5/1h';
            	}
            	if(mark == 6)
            	{
            		for (var z= 0; z < js.length; z++)
                	{
                		datas[z] = js[z].g;
                	}
            		options.series[0].name = 'PM10/1h';
            	}
            	if(mark == 7)
            	{
            		for (var z= 0; z < js.length; z++)
                	{
                		datas[z] = js[z].h;
                	}
            		options.series[0].name = 'CO/1h';
            	}
            	if(mark == 8)
            	{
            		for (var z= 0; z < js.length; z++)
                	{
                		datas[z] = js[z].i;
                	}
            		options.series[0].name = 'NO2/1h';
            	}
            	if(mark == 9)
            	{
            		for (var z= 0; z < js.length; z++)
                	{
                		datas[z] = js[z].j;
                	}
            		options.series[0].name = 'O3/1h';
            	}
            	if(mark == 10)
            	{
            		for (var z= 0; z < js.length; z++)
                	{
                		datas[z] = js[z].k;
                	}
            		options.series[0].name = 'O3/8h';
            	}	
            	if(mark == 11)
            	{
            		for (var z= 0; z < js.length; z++)
                	{
                		datas[z] = js[z].l;
                	}
            		options.series[0].name = 'SO2/1h';
            	}
            	
        	
    		
        	options.series[0].data = datas;
var chart = new Highcharts.Chart('container', options);
}
        function DisplayGraphs3()
        {
        	var options = {
    chart: {
        renderTo: 'container',
        type: 'line',
        inverted: false
    },
    title: {
                    text:'城市空气质量图 '           // 标题
            },
            xAxis: {},
            yAxis: {
                title: {
                    text: '空气指数/AQI'                // y 轴标题
                }
            },
    series: [{}]
};
        	var datas=new Array();
        	var times=new Array();
        	for (var z= 0; z < js.length; z++)
        	{
        		times[z] = js[z].b;
        	}
        	options.xAxis.categories = times;
        	
        
        		for (var z= 0; z < js.length; z++)
        			{
        			datas[z] = js[z].d;
        			}
        		options.series[0].name = '空气指数 ';
        	options.series[0].data = datas;
var chart = new Highcharts.Chart('container', options);
}
function DisplayGraphs4()
{
	
    var options = {
    chart: {
        renderTo: 'container',
        type: 'line',
        inverted: false
    },
    title: {
                    text:'空气质量预测图'           // 标题
            },
    subtitle: {
				text: '前2小时为实际值，后1小时为预测值'
		},
    		
            xAxis: {},
            yAxis: {
                title: {
                    text: '/AQI '                // y 轴标题
                }
            },
    series: [{
    	 zoneAxis: 'x',
    	 zones: [{
    	             value: 2,
    	          },
    	          {
    	        	  
    	        	  color:'red',
    	          }]
    }]
};
        	var datas=new Array();
        	var times=new Array();
        	var i = 0;
        	for (var z in js[0])
        	{
        		times[i++] = z;
        	}
        	//alert(times);
        	options.xAxis.categories = times;
        	
        	var j = 0;
        
        		for (var z in js[0])
        			{
        			//alert(js[0][z])
        			datas[j++] = js[0][z];
        			}
        		//alert(datas);
        		options.series[0].name = '预测的空气指数';
        		
    		
        	options.series[0].data = datas;
var chart = new Highcharts.Chart('container', options);
}

        
</script>

</body>
</html>